<script setup>
import { inject, ref, onMounted, computed } from 'vue'
import ObjectEditor from './ObjectEditor.vue'
import { NButton } from 'naive-ui'
import { useGet, axiosGet, get, post } from '../../utils/request'
import Cookies from 'js-cookie'

defineOptions({
    name: 'Console',
    mounted() {
        import('./Index.css')
    }
})

const url = defineModel('url', { type: String, default: 'http://localhost:3001/explorer' })
const method = defineModel('method', { type: String, default: 'GET' })

const props = defineProps({
    headers: {
        type: Object,
        default: () => ({
            a: 123,
            b: 123,
            c: 123
        })
    },
    params: {
        type: Object
    },
    data: {
        type: Object
    }
})

const methodOptions = ref([
    {
        label: 'GET',
        value: 'GET'
    },
    {
        label: 'POST',
        value: 'POST'
    },
    {
        label: 'PUT',
        value: 'PUT'
    },
    {
        label: 'DELETE',
        value: 'DELETE'
    },
    {
        label: 'Socket.IO',
        value: 'Socket.IO'
    },
    {
        label: 'OPTIONS',
        value: 'OPTIONS'
    }
])

onMounted(() => {
    console.log(props.response)
    // internalUrl.value = props.url
})
const response = ref({})
const json = computed(() => JSON.stringify(response.value?.data, null, 4))
const cookiedd = computed(() => {
    return Cookies.get()
})
const send = async () => {
    response.value = await axiosGet(url.value, {
        headers: {
            'User-Agent': 'Apifox/1.0.0 (https://apifox.com)'
        },
        withCredentials: true
    })
    console.log(response.value)
}
</script>

<template>
    <div class="abc">12313</div>
    <n-flex vertical justify="start">
        <n-input-group>
            <n-select v-model:value="method" :options="methodOptions" style="width: 120px" />
            <n-input v-model:value="url" type="text" placeholder="基本的 Input" />
            <n-button-group>
                <n-button type="default" @click="send">发送</n-button>
                <n-button type="default">保存</n-button>
                <n-button type="default">保存用例</n-button>
            </n-button-group>
        </n-input-group>
        <n-tabs default-value="Params" animated>
            <n-tab-pane display-directive="show" name="Headers" tab="Headers">
                <ObjectEditor :object="headers" />
            </n-tab-pane>
            <n-tab-pane display-directive="show" name="Params" tab="Params">
                <ObjectEditor :object="params" />
            </n-tab-pane>
            <n-tab-pane display-directive="show" name="Body" tab="Body">
                <ObjectEditor :object="response" />
            </n-tab-pane>
        </n-tabs>
        <n-tabs default-value="Params" animated>
            <n-tab-pane display-directive="show" name="Headers" tab="Body">
                <!-- <ObjectEditor :object="response.headers" /> -->
            </n-tab-pane>
            <n-tab-pane display-directive="show" name="Cookie" tab="Cookie">
                <ObjectEditor :object="params" />
                {{ cookiedd }}
            </n-tab-pane>
            <n-tab-pane display-directive="show" name="Header" tab="Header">
                <ObjectEditor :object="response.headers" />
            </n-tab-pane>
            <n-tab-pane display-directive="show" name="原始请求" tab="原始请求">
                <pre>
                    {{ response }}
                </pre>
            </n-tab-pane>
        </n-tabs>
    </n-flex>
</template>
